<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>flow - javascript ui</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="../favicon.ico" />
	<link rel="stylesheet" href="css/page.css" type="text/css"/>
	<!-- <link rel="stylesheet" href="../fonts/open-sans/open-sans.css" type="text/css"/> -->
</head>
<body>
	<script type="module">

		import * as Flow from '../build/flow.module.js';

		const node = new Flow.PanelNode( 'Inputs', 'center' );
		node.setWidth( 350 );
		node.setAlign( 'center' );

		node.add(
			new Flow.LabelElement( 'Numbers' )
				.add( new Flow.NumberInput( 1 ) )
				.add( new Flow.NumberInput( 2 ) )
				.add( new Flow.NumberInput( 3 ) )
		);

		node.add(
			new Flow.LabelElement( 'Color' )
				.add( new Flow.ColorInput( 0xFF9900 ) )
		);

		node.add(
			new Flow.LabelElement( 'String' )
				.add( new Flow.StringInput( 'Hello World!' ) )
		);

		node.add(
			new Flow.LabelElement( 'Options' )
				.add( new Flow.SelectInput( [ 'Value 1', 'Value 2' ] ) )
		);

		node.add(
			new Flow.LabelElement( 'Slider' )
				.add( new Flow.SliderInput( 50 ) )
		);

		node.add(
			new Flow.LabelElement( 'Toggle' )
				.add( new Flow.ToggleInput( false ) )
		);

		node.add(
			new Flow.LabelElement().setHeight( 100 )
				.add( new Flow.TextInput( 'Text Area' ) )
		);

		node.add(
			new Flow.Element().setHeight( 35 )
				.add( new Flow.ButtonInput( 'OK' ) )
		);

		document.body.appendChild( node.dom );

	</script>
</body>
</html>